<template>
  <div class="quick-registration">
    <div class="page-header">
      <h1>快速登记</h1>
    </div>
    
    <!-- 进度条 -->
    <div class="progress-bar">
      <div class="progress-step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
        <div class="step-icon">
          <i v-if="currentStep > 1" class="el-icon-check"></i>
          <span v-else>1</span>
        </div>
        <span class="step-text">选择服务项目</span>
      </div>
      <div class="progress-line" :class="{ completed: currentStep > 1 }"></div>
      
      <div class="progress-step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
        <div class="step-icon">
          <i v-if="currentStep > 2" class="el-icon-check"></i>
          <span v-else>2</span>
        </div>
        <span class="step-text">选择技师</span>
      </div>
      <div class="progress-line" :class="{ completed: currentStep > 2 }"></div>
      
      <div class="progress-step" :class="{ active: currentStep >= 3 }">
        <div class="step-icon">
          <span>3</span>
        </div>
        <span class="step-text">确认信息</span>
      </div>
    </div>
    
    <!-- 步骤内容 -->
    <div class="step-content">
      <!-- 步骤1：选择服务项目 -->
      <div v-if="currentStep === 1" class="step-panel">
        <h2>选择服务项目</h2>
        <div class="service-grid">
          <div
            v-for="service in services"
            :key="service._id"
            class="service-card"
            :class="{ selected: selectedService?._id === service._id }"
            @click="selectService(service)"
          >
            <div class="service-image">
              <img :src="service.image || '/default-service.jpg'" :alt="service.name">
            </div>
            <div class="service-info">
              <h3>{{ service.name }}</h3>
              <p class="service-category">{{ service.category }}</p>
              <p class="service-price">¥{{ service.price }}</p>
              <p class="service-duration">{{ service.duration }}分钟</p>
              <p class="service-description">{{ service.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 步骤2：选择技师 -->
      <div v-if="currentStep === 2" class="step-panel">
        <h2>选择技师</h2>
        <div class="technician-grid">
          <div
            v-for="technician in availableTechnicians"
            :key="technician._id"
            class="technician-card"
            :class="{ selected: selectedTechnician?._id === technician._id }"
            @click="selectTechnician(technician)"
          >
            <div class="technician-avatar">
              <span>{{ technician.avatar }}</span>
            </div>
            <div class="technician-info">
              <h3>{{ technician.name }}</h3>
              <div class="rating">
                <span class="rating-score">{{ technician.rating }}</span>
                <i class="el-icon-star-on"></i>
              </div>
              <p class="technician-status" :class="getStatusClass(technician.status)">
                {{ technician.status }}
              </p>
              <p class="technician-skills">{{ technician.skills.join(', ') }}</p>
              <p class="technician-experience">{{ technician.experience }}年经验</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 步骤3：确认信息 -->
      <div v-if="currentStep === 3" class="step-panel">
        <h2>确认信息</h2>
        <div class="confirmation-form">
          <div class="form-row">
            <label>客户姓名：</label>
            <el-input v-model="customerInfo.name" placeholder="客户姓名"></el-input>
          </div>
          <div class="form-row">
            <label>手机号：</label>
            <el-input v-model="customerInfo.phone" placeholder="手机号"></el-input>
          </div>
          <div class="form-row">
            <label>服务项目：</label>
            <span class="info-value">{{ selectedService?.name }}</span>
          </div>
          <div class="form-row">
            <label>服务技师：</label>
            <span class="info-value">{{ selectedTechnician?.name }}</span>
          </div>
          <div class="form-row">
            <label>服务时长：</label>
            <span class="info-value">{{ selectedService?.duration }}分钟</span>
          </div>
          <div class="form-row">
            <label>服务价格：</label>
            <span class="info-value price">¥{{ selectedService?.price }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 导航按钮 -->
    <div class="navigation-buttons">
      <el-button 
        v-if="currentStep > 1" 
        @click="previousStep"
        size="large"
      >
        上一步
      </el-button>
      
      <el-button 
        v-if="currentStep < 3" 
        type="primary" 
        @click="nextStep"
        size="large"
        :disabled="!canProceed"
      >
        下一步
      </el-button>
      
      <el-button 
        v-if="currentStep === 3" 
        type="success" 
        @click="confirmAppointment"
        size="large"
        :loading="submitting"
      >
        确认预约
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../utils/request'

// 响应式数据
const currentStep = ref(1)
const services = ref([])
const technicians = ref([])
const selectedService = ref(null)
const selectedTechnician = ref(null)
const customerInfo = ref({
  name: '',
  phone: ''
})
const submitting = ref(false)

// 计算属性
const availableTechnicians = computed(() => {
  if (!selectedService.value) return []
  return technicians.value.filter(tech => 
    tech.status === '空闲中' && 
    tech.skills.includes(selectedService.value.category)
  )
})

const canProceed = computed(() => {
  if (currentStep.value === 1) {
    return selectedService.value !== null
  } else if (currentStep.value === 2) {
    return selectedTechnician.value !== null
  }
  return true
})

// 方法
const selectService = (service) => {
  selectedService.value = service
  // 重置技师选择
  selectedTechnician.value = null
}

const selectTechnician = (technician) => {
  selectedTechnician.value = technician
}

const nextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++
  }
}

const previousStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

const getStatusClass = (status) => {
  const statusMap = {
    '空闲中': 'available',
    '服务中': 'busy',
    '休息中': 'rest',
    '请假中': 'leave'
  }
  return statusMap[status] || 'available'
}

const confirmAppointment = async () => {
  // 验证表单
  if (!customerInfo.value.name.trim()) {
    ElMessage.error('请输入客户姓名')
    return
  }
  if (!customerInfo.value.phone.trim()) {
    ElMessage.error('请输入手机号')
    return
  }
  
  try {
    submitting.value = true
    
    const appointmentData = {
      customerName: customerInfo.value.name,
      customerPhone: customerInfo.value.phone,
      serviceId: selectedService.value._id,
      technicianId: selectedTechnician.value._id,
      appointmentDate: new Date().toISOString().split('T')[0], // 今天
      appointmentTime: '09:00-11:00', // 默认时间段
      notes: ''
    }
    
    const response = await request.post('/api/quick-registration/appointment', appointmentData)
    
    if (response.data.code === 200) {
      ElMessage.success('预约创建成功！')
      
      // 显示预约信息
      await ElMessageBox.alert(
        `预约编号：${response.data.data.appointmentNumber}\n服务项目：${selectedService.value.name}\n技师：${selectedTechnician.value.name}\n时间：${appointmentData.appointmentDate} ${appointmentData.appointmentTime}`,
        '预约成功',
        {
          confirmButtonText: '确定',
          type: 'success'
        }
      )
      
      // 重置表单
      resetForm()
    } else {
      ElMessage.error(response.data.message || '预约创建失败')
    }
  } catch (error) {
    console.error('创建预约失败:', error)
    ElMessage.error('预约创建失败，请重试')
  } finally {
    submitting.value = false
  }
}

const resetForm = () => {
  currentStep.value = 1
  selectedService.value = null
  selectedTechnician.value = null
  customerInfo.value = {
    name: '',
    phone: ''
  }
}

// 获取数据
const fetchServices = async () => {
  try {
    const response = await request.get('/api/quick-registration/services')
    if (response.data.code === 200) {
      services.value = response.data.data
    }
  } catch (error) {
    console.error('获取服务列表失败:', error)
    ElMessage.error('获取服务列表失败')
  }
}

const fetchTechnicians = async () => {
  try {
    const response = await request.get('/api/quick-registration/technicians')
    if (response.data.code === 200) {
      technicians.value = response.data.data
    }
  } catch (error) {
    console.error('获取技师列表失败:', error)
    ElMessage.error('获取技师列表失败')
  }
}

// 生命周期
onMounted(() => {
  fetchServices()
  fetchTechnicians()
})
</script>

<style scoped>
.quick-registration {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #303133;
  margin: 0;
}

/* 进度条样式 */
.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #dcdfe6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.progress-step.active .step-icon {
  background-color: #409eff;
}

.progress-step.completed .step-icon {
  background-color: #67c23a;
}

.step-text {
  font-size: 14px;
  color: #909399;
  transition: color 0.3s ease;
}

.progress-step.active .step-text {
  color: #409eff;
}

.progress-step.completed .step-text {
  color: #67c23a;
}

.progress-line {
  width: 100px;
  height: 2px;
  background-color: #dcdfe6;
  margin: 0 20px;
  transition: background-color 0.3s ease;
}

.progress-line.completed {
  background-color: #67c23a;
}

/* 步骤内容样式 */
.step-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.step-panel h2 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 20px;
  text-align: center;
}

/* 服务网格 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.service-card {
  border: 2px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.service-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.service-card.selected {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.service-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 15px;
}

.service-info h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
}

.service-category {
  color: #909399;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.service-price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.service-duration {
  color: #606266;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.service-description {
  color: #909399;
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}

/* 技师网格 */
.technician-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.technician-card {
  border: 2px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.technician-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.technician-card.selected {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.technician-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #909399;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 15px;
}

.technician-info h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
}

.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
}

.rating-score {
  font-size: 16px;
  font-weight: bold;
  color: #f56c6c;
}

.el-icon-star-on {
  color: #f56c6c;
}

.technician-status {
  margin: 0 0 8px 0;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.technician-status.available {
  background-color: #f0f9ff;
  color: #409eff;
}

.technician-status.busy {
  background-color: #fef0f0;
  color: #f56c6c;
}

.technician-status.rest {
  background-color: #f0f9ff;
  color: #909399;
}

.technician-status.leave {
  background-color: #fef0f0;
  color: #e6a23c;
}

.technician-skills {
  color: #606266;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.technician-experience {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

/* 确认信息表单 */
.confirmation-form {
  max-width: 500px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-row label {
  width: 100px;
  color: #606266;
  font-weight: bold;
}

.form-row .el-input {
  flex: 1;
}

.info-value {
  flex: 1;
  color: #303133;
  font-weight: bold;
}

.info-value.price {
  color: #f56c6c;
  font-size: 18px;
}

/* 导航按钮 */
.navigation-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .quick-registration {
    padding: 10px;
  }
  
  .step-content {
    padding: 20px;
  }
  
  .service-grid,
  .technician-grid {
    grid-template-columns: 1fr;
  }
  
  .progress-line {
    width: 50px;
  }
  
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-row label {
    width: auto;
    margin-bottom: 8px;
  }
}
</style> 